<template>
  <div class="login">
    <div class="login-header">
      <div class="container">
        <a href="/#/index">
          <img src="/imgs/logo-mi.png" alt="home">
        </a>
        <div>
          <div class="title">小米商城</div>
          <div class="flag">让每个人都能享受科技的乐趣</div>
        </div>
      </div>
    </div>
    <div class="login-body">
      <div class="container">
        <div class="form">
          <div class="form-header">
            <a
              href="javascript: ;"
              :class="[loginType === 'acountLogin'? 'active-color' : '']"
              @click="loginType = 'acountLogin'"
            >账号登录</a>
            <a
              href="javascript: ;"
              :class="[loginType === 'codeLogin'? 'active-color' : '']"
              @click="loginType = 'codeLogin'"
            >扫码登录</a>
          </div>
          <div
            class="acount-login"
            v-if="loginType === 'acountLogin'"
          >
            <input
              class="suer-num"
              type="text"
              placeholder="邮箱/手机号码/小米ID"
              v-model="username"
            >
            <input
              class="password"
              type="password"
              placeholder="密码"
              v-model="password"
            >
            <span class="btn btn-huge" @click="login">登录</span>
            <span class="login-nav">
              <span class="active" @click="$router.push('/register')">手机短信登录/注册</span>
              <span><span @click="$router.push('/register')">立即注册</span>|<span>忘记密码</span></span>
            </span>
          </div>
          <div
            class="code-login"
            v-if="loginType === 'codeLogin'"
          >
            <img src="/imgs/logo-mi.png" alt="login">
          </div>
        </div>
      </div>
    </div>
    <div class="login-footer"></div>
    <nav-footer></nav-footer>
  </div>
</template>

<script>
  import { getLogin } from './../../util/request.js'
  import { mapActions } from 'vuex'
  import NavFooter from '../../components/NavFooter'
  export default {
    data() {
      return {
        loginType: 'acountLogin',
        username: '',
        password: ''
      }
    },
    methods: {
      login() {
        let params = {
          username: this.username,
          password: this.password
        }
        getLogin(params).then((res) => {
          this.$cookie.set('userId', res.id, { expires: 'Session' })
          this.saveUserName(res.username)
          // 使用参数路由跳转，优化请求次数
          this.$router.push({
            name: 'index',
            params: {
              from: '/login'
            }
          })
        }, (reason) => {
          alert(reason)
        })
      },
      ...mapActions(['saveUserName'])
    },
    components: {
      NavFooter
    }
  }
</script>

<style lang='scss' scoped>
@import '../../assets/scss/config.scss';
@import '../../assets/scss/mixin.scss';
@import '../../assets/scss/button.scss';
.login{
  .login-header{
    .container{
      height: 112px;
      @include flex(flex-start,center);
      a{
        display: inline-block;
        width: 53px;
        height: 52px;
        margin-right: 18px;
        img{
          width: 53px;
          height: 52px;
        }
      }
      div{
        text-align: center;
        .title{
          color: #333333;
          font-size: 33px;
          font-weight: bold;
        }
        .flag{
          color: #666666;
          font-size: 10px;
        }
      }
    }
  }
  .login-body{
    // background: url('/imgs/login-bg.jpg') no-repeat center;
    // background-size: auto 100%;
    @include bgImg(auto,auto,'/imgs/login-bg.jpg',auto 100%);
    .container{
      position: relative;
      height: 576px;
      .form{
        position: absolute;
        top: 37px;
        right: 0;
        width: 410px;
        height: 510px;
        background: $colorG;
        .form-header{
          padding: 40px 0;
          text-align: center;
          a{
            display: inline-block;
            font-size: 24px;
            color: $colorC;
            padding: 0 35px;
            border-right: 2px solid $colorF;
            &:last-child{
              border: none;
            }
          }
        }
        .acount-login{
          padding-top: 9px;
          width: 100%;
          display: flex;
          flex-direction: column;
          // justify-content: center;
          align-items: center;
          input{
            width: 348px;
            height: 50px;
            padding-left: 1em;
            box-sizing: border-box;
            border: 1px solid $colorH;
            &:first-child{
              margin-bottom: 20px
            }
          }
          .btn{
            width: 348px;
            height: 50px;
            text-align: center;
            line-height: 50px;
            font-size: $fontI;
            font-weight: bold;
            margin-top: 30px;
            cursor: pointer;
          }
          .login-nav{
            margin-top: 12px;
            display: flex;
            justify-content: space-between;
            width: 348px;
            font-size: 14px;
            .active{
              color: $colorA;
            }
            span{
              cursor: pointer;
            }
          }
        }
        .code-login{
          margin-top: 9px;
          text-align: center;
          box-sizing: border-box;
          img{
            display: inline-block;
            width: 348px;
            height: 348px;
          }
        }
      }
    }
  }
}
.active-color{
  color: $colorA !important;
}
.nav-footer{
  background: $colorG;
  border: none;
}
</style>